<template>
    <div>
        <div class="tableHeadBox">
            <div class="buttonBox">
                <el-button class="addButton" type="primary" size="small" @click="ClickAdd">添加学院</el-button>
            </div>
            <div class="searchBox">
                <el-input class="searchInput" v-model="searchStr" size="small" placeholder="请输入学院"></el-input>
                <el-button class="searchButton" type="primary" size="small" :icon="Search">搜索</el-button>
            </div>
        </div>

        <!--#region 列表 -->
        <div class="tableBox">
            <el-table :data="filterTableData" height="100%" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="name" label="学院名"></el-table-column>
                <el-table-column prop="state" label="状态">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.state">已启用</el-tag>
                        <el-tag type="info" v-else>未启用</el-tag>
                    </template>
                </el-table-column>
                <!-- 按钮 -->
                <el-table-column fixed="right" label="操作" width="330">
                    <template #default="scope">
                        <el-button round type="primary" size="small"
                            @click="ClickEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button round type="danger" size="small"
                            @click="ClickDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- #endregion -->
    </div>

    <!--编辑/添加弹窗 -->
    <el-dialog v-model="dialogVisible" :title="currentBuilding==null?'添加学院':'编辑学院'" width="300" top="30vh" :close-on-press-escape="false">
        <AcademicianForm v-if="dialogVisible" :Close="Close" :transmitObj="currentBuilding"></AcademicianForm>
    </el-dialog>

</template>

<script setup>
import service from '@/request';
import '../assets/css/table.css'
import { Search } from '@element-plus/icons-vue'
import { reactive, ref,computed, onBeforeMount, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import AcademicianForm from '@/components/AcademicianForm.vue';
// #region 显示提示
async function ShowTip(isSuccess, msg) {
    if (isSuccess == true) {
        ElMessage({message: msg, type: 'success'})
    }
    else {
        ElMessage({message: msg, type: 'error'})
    }
}
//#endregion


//获取数据
let tableData = reactive([])
async function getDataList() {
    let resultData = []
    await service.get("/Mangment/getAllAcademician").then(
        (res) => {
            resultData.push(...res.value)
        }
    )
    return resultData
}


//搜索
let searchStr=ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !searchStr.value ||
      data.name.toLowerCase().includes(searchStr.value.toLowerCase())
  )
)


//添加/编辑
let currentBuilding = null;
let dialogVisible = ref(false)
async function ClickAdd() {
    currentBuilding = null;
    dialogVisible.value = true;
}
async function ClickEdit(index,row){
    currentBuilding = row;
    dialogVisible.value = true;
}
async function Close() {
    currentBuilding = null;
    dialogVisible.value = false;
   await Reload()
}



//删除
async function ClickDelete(index, row) {
    await ElMessageBox.confirm(
        '你确定要这么做吗，这样做将无法撤回?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        service.delete("/Mangment/deleteAcademician?academicianId="+row.id).then(
            async res=>{
                ShowTip(true,'删除成功')
                await Reload()
            },
            error=>{
                ShowTip(false,'删除失败')
            }
        )
    }).catch(() => {
        ShowTip(false, '取消删除')
    })
}


async function Reload(){
    tableData.length = 0
    tableData.push(...await getDataList())
}

onBeforeMount(async () => {
    await Reload()
})


</script>

<style scoped>
.el-radio {
    margin-top: 10px;
    width: 250px;
}

.buttonBox {
    float: left;
    height: 40px;
    padding-top: 10px;
    margin-left: 20px;
}

.searchInput,
.addInput {
    width: 200px;
}

.searchButton,
.addButton {
    margin-left: 10px;
}
</style>